<template>
  <div>
    <p>Message is {{ message }}</p>
    <input v-model="message" placeholder="edit me" />
  </div>
  <div>
    <span>Multiline message is</span>
    <p style="white-space: pre-line">{{ message }}</p>
    <textarea cols="20" rows="5" v-model="message"></textarea>
  </div>
  <div>
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
  </div>
  <div>
    <p>checked names:{{ checkedNames }}</p>
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames" />
    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="john" v-model="checkedNames" />
    <label for="john">john</label>

    <input type="checkbox" id="mike" value="mike" v-model="checkedNames" />
    <label for="mike">mike</label>
  </div>

  <div>
    <p>picked {{ picked }}</p>

    <input type="radio" id="one" value="one" v-model="picked" />
    <label for="one">One</label>

    <input type="radio" id="two" value="two" v-model="picked" />
    <label for="two">two</label>
  </div>

  <div>
    <p>selected {{ selected }}</p>

    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
  <div>
    <p>多选{{ selectedSome }}</p>

    <select v-model="selectedSome" multiple>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('string')
const checked = ref(false)
const checkedNames = ref([])
const picked = ref()
const selected = ref()
const selectedSome = ref([])
</script>
